<template>
  <div class="rightmain_container">
    <div class="oprations_box">
      <div class="left_search">
        <el-icon :size="20" color="#444545">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="right_btn">
        <!-- 给添加按钮 绑定 弹窗组件和相关的数据 -->
        <el-button @click="ediFlash">添加</el-button>
      </div>
    </div>

    <!-- 数据 -->

    <div class="table_box">
      <el-table border :data="steaData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="秒杀时间段名称" />

        <el-table-column prop="startTime" label="每日开始时间">
          <template #default="{ row }">
            {{ formateTime(row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="每日结束时间">
          <template #default="{ row }">
            {{ formateTime(row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="启用">
          <template #default="{ row }">
            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="switchChange(row)" />
          </template>
        </el-table-column>
        <el-table-column prop="email" label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="ediFlash">编辑</el-button>
            <el-button type="primary" link @click="Deletse(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>


  <EidflashSession :visible="sine" @offf="offf" />
</template>
<script setup lang="ts">
import { formateTime } from "@/utils/index";
import {
  ApiflashSession,
  ApiFlashSesssinUpData,
  ApiFalshSessibobn,
} from "@/http/hjh.api";
import { Tickets } from "@element-plus/icons-vue";
// @ts-ignore
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import EidflashSession from "@/views/sms/components/eidflashSession.vue"
// 添加编辑按钮


const sine = ref(false)


const ediFlash = () => {
  sine.value = true
};
const offf = () => {
  sine.value = false
}

















//删除数据
// 初始化id

const Deletse = (ids: number) => {
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ApiFalshSessibobn(Number(ids)).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 表单数据渲染
const steaData = ref<FlashSession>();
ApiflashSession().then((res) => {
  if (res.code === 200) {
    steaData.value = res.data;
  }
});
const switchChange = (user: IUserListModel) => {
  ApiFlashSesssinUpData({
    id: user.id,
    status: user.status,
  }).then((res) => {
    if (res.code === 200) {
      ElMessageBox.confirm("是否要修改该状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
        })
        .catch(() => {
          user.status = user.status === 1 ? 0 : 1;
        });
    }
  });
};
</script>

<style lang="less" scoped>
.rightmain_container {
  .left_search {
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      color: #303133;
      margin-left: 10px;
    }
  }

  .oprations_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
  }
}
</style>
